<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>Treeview</title>

		<meta name="description" content="with selectable items(single &amp; multiple) and custom icons" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		
		<link rel="stylesheet" href="../../lib/assets/css/bootstrap.css" />
		<link rel="stylesheet" href="../../lib/assets/css/font-awesome.css" />
		<link rel="stylesheet" href="../../lib/assets/css/ace-fonts.css" />
		<link rel="stylesheet" href="../../lib/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />

		<body>
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<!-- #section:plugins/fuelux.treeview -->
					<div class="row">
						<div class="col-sm-6">
							<div class="widget-box widget-color-blue2">
								<div class="widget-body">
									<div class="widget-main padding-8">
										<ul id="tree1">
										</ul>
									</div>
								</div>
							</div>
						</div>

						<div class="col-sm-6">
							<div class="widget-box widget-color-green2">
								<div class="widget-body">
									<div class="widget-main padding-8">
										<ul id="tree2">
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- /section:plugins/fuelux.treeview -->
					<!-- PAGE CONTENT ENDS -->
				</div><!-- /.col -->
			</div><!-- /.row -->
			</div><!-- /.page-content -->
			</div>
			</div><!-- /.main-content -->

			<script src="jquery-1.8.3.min.js"></script>
			<script src="sim.tree.js"></script>
			<script type="text/javascript">
				$( function() {
					$.ajax({
						type : "GET",
						url : "http://127.0.0.1:8020/dmm_back/js/dep.JSON",
						success : function(data) {
							var jsonData = eval('(' + data + ')');
							var root = jsonData['data'];
							$("#tree1").sim_tree({
								data:root,
								callback: function() {
									$(".view_dep_info_btn").on("click", function(evt) {
										var dep_id = $(this).attr("dep_id");
										var dep_parent_id = $(this).attr("dep_parent_id");
										alert(dep_id);
										return false;
									});
								},
								extend: {
									position:"after",
									tag:"a",
									attr: {
										"class":"view_dep_info_btn",
									},
									text:"VIEW",
									param:["dep_id","dep_parent_id"]
								}
							});
						}
					});
				
				});
			</script>
		</body>
</html>
